<template>
  <div class="footer">
    <!-- 全选 -->
    <div class="custom-control custom-checkbox">
      <input
        type="checkbox"
        class="custom-control-input"
        id="footerCheck"
        v-model="isAll"
      />
      <label class="custom-control-label" for="footerCheck">全选</label>
    </div>
    <!-- 合计 -->
    <div>
      <span>合计:</span>
      <span class="price">¥ {{ allPrice }}</span>
    </div>
    <!-- 按钮 -->
    <button
      @click="settlement(allPrice)"
      type="button"
      class="footer-btn btn btn-primary"
    >
      结算 ( {{ allCount }} )
    </button>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      // html:""
    };
  },
  props: {
    arr: Array,
  },
  computed: {
    isAll: {
      set(val) {
        this.$emit("changeAll", val);
      },
      get() {
        return this.arr.every((obj) => obj.goods_state === true);
      },
    },
    allCount() {
      return this.arr.reduce((sum, obj) => {
        if (obj.goods_state === true) {
          // 选中商品才累加数量
          sum += obj.buycount;
        }
        return sum;
      }, 0);
    },

    allPrice() {
      return this.arr.reduce((sum, obj) => {
        if (obj.goods_state) {
          sum += obj.buycount * obj.price;
        }
        return sum;
      }, 0);
    },
  },
  methods: {
    settlement(allPrice) {
      //存订单
      this.arr.forEach((v) => {
        if (v.goods_state) {
          console.log(v.id);
          axios({
            url: "/api/product/modo",
            method: "post",
            params: {
              id: v.id,
              userId:JSON.parse(localStorage.getItem("user")).userId,
              buycount:v.buycount,
            },
          }).then((res) => {});
        }
      });

      // this.$router.push({ path: '/close',query:{allPrice:allPrice,arr:this.arr}})

      console.log(allPrice);
      this.arr.forEach((v) => {
        if (v.goods_state) {
          console.log(v.id);
          axios({
            url: "/api/product/deletee",
            method: "GET",
            params: {
              id: v.id,
              userId: JSON.parse(localStorage.getItem("user")).userId,
            },
          }).then((res) => {});
        }
      });

      axios({
        url: "/api/order/alipay",
        method: "POST",
        params: {
          subject: "www",
          total_amount: allPrice,
          pserial: 1111,
        },
      }).then((resp) => {
        // 添加之前先删除一下，如果单页面，页面不刷新，添加进去的内容会一直保留在页面中，二次调用form表单会出错

        // console.log(this.html);

        //   this.$router.push({
        //   path: "/pay",
        //   query: {
        //     html: this.html,
        //   },
        // });
        const divForm = document.getElementsByTagName("div");
        if (divForm.length) {
          document.body.removeChild(divForm[0]);
        }
        console.log(resp);
        //  this.html = resp.data;
        const div = document.createElement("div"); //创建新窗口
       
        div.innerHTML = resp.data; // data就是接口返回的form 表单字符串
        document.body.appendChild(div);
        // document.forms[0].setAttribute("target", "/pay"); // 新开窗口跳转
       this.$router.push({path:"/good"})
        document.forms[0].submit();
        this.serve();
      
      });
    },
  },
};
</script>

<style lang="less">
.footer {
  width: 100%;
  height: 50px;
  background: #fdfefe;
  display: flex;
  border-top: 1px solid #ccc;
  align-items: center;

  justify-content: space-between;
  font-size: 20px;
  .price {
    color: red;
    font-weight: bold;
  }
  .btn {
    border-radius: 30px;
    margin-right: 20px;
    background-color: blue;
    border: transparent;
    color: #fff;
  }
}
</style>